<template>
  <div>
    hello vue
    <input type="text" ref="mytext">
    <button @click="addHandle()">add</button>
    <ul>
      <li v-for="data in datalist" :key="data">
        {{data}}
      </li>
    </ul>
    <navbar>
      <button @click="isShow=!isShow">navbar-button</button>
    </navbar>
    <sidebar v-if="isShow"></sidebar>
    <tabbar></tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
import navbar from './components/Navbar'
import sidebar from './components/Sidebar'
import axios from 'axios'
import tabbar from './components/Tabbar'
import Vue from 'vue'

// 全局组件
Vue.component('navbar', navbar)
Vue.component('sidebar', sidebar)
export default {
  data () {
    return {
      datalist: [],
      isShow: true
    }
  },
  methods: {
    addHandle () {
      console.log('dasd')
      this.datalist.push(this.$refs.mytext.value)
    }
  },
  // 局部组件
  components: {
    tabbar: tabbar
  },
  mounted () {
    axios.get('/ajax/movieOnInfoList?token=').then(res => {
      console.log(res.data)
    })
  }
}
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  li{
    background: yellow
  }
}
</style>
